<script setup>
import {  getClusterListHandler } from '../../api/cluster.js'
import {getNodeListHandler as getListHandler } from "../../api/node.js";
import {onBeforeMount, reactive, toRefs, ref ,computed } from "vue";
import Edit from "./Edit.vue";
import {useRoute} from "vue-router";
import Detail from "./Detail.vue";

// loading 为true是 是加载状态，在数据加载成功后，把 loading.value设置成false 停止转圈

const  data = reactive({
   items: [],
  clusterList: [],
  clusterId: "",
  editItems: {},
  editNodeName: "",
  detailItem: {},
  detailNodeName: ""
})


const route = useRoute()
const editdialog =ref(false)
const detailDialog =ref(false)
const loading = ref(true)
const value1 = ref(false)
// 获取集群列表
// 使用api/user.js中封装好的方法 axios 获取后端接口数据
const getList = (id)=>{
  loading.value =true
  console.log("集群列表中打印response")
  getListHandler(id).then((response)=>{
    console.log("集群列表中打印response",response.data.data.list)
    data.items = response.data.data.items
    console.log("打印items",data.items)
    loading.value =false
  })
}


// 编辑节点信息
const edit=(row)=>{
  loading.value=true
  console.log("编辑的节点:",row)
  data.editItems = row
  data.editNodeName = row.metadata.name
  console.log("编辑的节点data.editItems:",data.editItems)
  editdialog.value = true   // 再点击设置按钮时 设置为true
  loading.value=false
}
// 点击集群id事件 展示数据的详细信息
const detail = (row) => {
    data.detailItem = row
  data.detailNodeName = row.metadata.name
  detailDialog.value=true
}


// 异步执行转为同步 前面执行完执行后面
const getClusterList = async ()=>{
  await getClusterListHandler().then((res)=>{
    console.log("打印获取集群列表",res)
    data.clusterList = res.data.data.items
    console.log("打印获取集群列表data.clusterList",data.clusterList)
  })
}

// 使用vue组件生命周期，在组件被挂载之前执行动作
onBeforeMount(async ()=>{
  // 查询列表之前，要知道查询那个集群的节点列表
  // 1. 查询到集群列表
  // 2. 如果没有指定集群，则给一个默认值，进行获取集群列表
  // 3. 如果指定了集群，就直接查询当前的几点列表
  // 4. 切换了集群后重新获取节点列表
  // 5. 集群不可用，则不可以选

  // 获取集群列表
  await getClusterList()
  // 定义一个默认的集群
  const defaultClusterSelected = data.clusterList[0].id
  console.log("默认的集群是: ",defaultClusterSelected)

  // 获取当前请求是否携带了集群ID的参数
  const  curClusterId =route.query.clusterId  // curClusterId 有可能是空的
  data.clusterId = curClusterId?curClusterId:defaultClusterSelected

  await getList(data.clusterId)
})

const search = ref('')
// 解构data中的items数组
const {clusterList,clusterId,editItems,editNodeName,detailItem,detailNodeName} = toRefs(data)
const getListAddDialog = ()=>{
  //getUserList()
  editdialog.value=false
}
const closeDialog=()=>{
  // 关闭添加程序的窗口时 更新数据
  getClusterList()
  // 定义一个默认的集群
  const defaultClusterSelected = data.clusterList[0].id
  console.log("默认的集群是: ",defaultClusterSelected)

  // 获取当前请求是否携带了集群ID的参数
  const  curClusterId =route.query.clusterId  // curClusterId 有可能是空的
  data.clusterId = curClusterId?curClusterId:defaultClusterSelected
  getList(data.clusterId)
}
const rollback =()=>{
  getClusterList()
  // 定义一个默认的集群
  const defaultClusterSelected = data.clusterList[0].id
  console.log("默认的集群是: ",defaultClusterSelected)

  // 获取当前请求是否携带了集群ID的参数
  const  curClusterId =route.query.clusterId  // curClusterId 有可能是空的
  data.clusterId = curClusterId?curClusterId:defaultClusterSelected
  editdialog.value=false
  getList(data.clusterId)
}

// 搜索的逻辑
const filterTableData = computed(() =>
    data.items.filter(
        (item) =>
            !search.value ||
            item.metadata.name.toLowerCase().includes(search.value.toLowerCase()) ||
            item.status.addresses[0].address.toLowerCase().includes(search.value.toLowerCase())
    )
)

</script>

<template>
  <el-card element-loading-text="玩命加载中..." class="box-card">
    <template #header>
      <div class="card-header">
        <div>
          <span>节点列表</span>
        </div>
        <div class="card-header">
          <el-select v-model="clusterId" placeholder="选择集群ID"  @change="getList(clusterId)" style="width:200px" >
            <el-option
                v-for="item in clusterList"
                :key="item.id"
                :label="item.id"
                :value="item.id"
                :disabled="item.status === 'InActive'"
            />
          </el-select>
          <el-input v-model="search" size="small" placeholder="搜索"  style="width:200px;height: 32px; margin-left: 20px"/>
        </div>
      </div>
    </template>
    <!--  放真实数据的地方  -->
    <el-table
        border
        height="480"
        :data="filterTableData"
        style="width: 100%"
    >
      <!--  align="center" 表格中居中  sortable 排序    -->
      <el-table-column fixed  prop="" align="center"  label="主机名" width="200" >
      <!--   router-link 实现在点击集群id的时候路径跳转     -->
        <template #default="scope">
          <el-button link type="warning" size="small" @click="detail(scope.row)">{{ scope.row.metadata.name }}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="status.addresses[0].address" align="center"  label="IP" width="200" />
      <!-- 角色未处理     -->
      <el-table-column prop="metadata.name" align="center"  label="角色" width="200" sortable />
      <!-- 节点状态未处理     -->
      <el-table-column prop="metadata.name" align="center"  label="节点状态" width="200" sortable />

      <el-table-column prop="" align="center"  label="状态" width="200" sortable >
        <template #default="scope">
          <el-icon v-if ="scope.row.status.conditions[scope.row.status.conditions.length -1 ].status === 'True'" color="green">Ready</el-icon>
          <el-icon v-else color="red">NotReady</el-icon>
        </template>
      </el-table-column>
      <el-table-column prop="" align="center"  label="禁止调度" width="200" >
        <template #default="scope">
          <el-switch v-model="value1" />
        </template>
      </el-table-column>
      <el-table-column prop="" align="center"  label="驱逐" width="200" >
        <template #default="scope">
          <el-switch v-model="value1" />
        </template>
      </el-table-column>
      <el-table-column fixed="right" align="center"  label="操作" >
        <!--  插槽的 scope 可以绑定行的数据  scope.row 获取一行的数据    -->
        <template #default="scope">
          <el-button link type="primary" size="small" @click="edit(scope.row)">配置</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 尾部的布局 -->
    <div class="auto-space-between" style="margin-top: 15px">
      <!--      // 批量操作-->
      <div>批量操作</div>
      <!--      // 统计总数-->
      <div>总数: {{ filterTableData.length }}</div>
    </div>
  </el-card>
  <el-dialog
      destroy-on-close
      @close="closeDialog()"
      v-model="editdialog"
      :title="'正在编辑集群:' + clusterId + ' 节点:' + editNodeName"
      width="70%" >
    <Edit @rollback="getList" :cluster-id="data.clusterId"  :item-form="editItems"></Edit>
  </el-dialog>
  <el-dialog
      destroy-on-close
      v-model="detailDialog"
      :title="'集群:' + clusterId + ' 节点: ' + detailNodeName"
      width="70%" >
    <Detail :item="detailItem"></Detail>
<!--    <Edit @rollback="getList" :cluster-id="data.clusterId"  :item-form="editItems"></Edit>-->
    <!--    <Add :item-form="itemForm" :method="defaultMethod"  @rollback="rollback()"></Add>-->
  </el-dialog>
</template>

<style scoped>
.card-header{
  display: flex;
  justify-content: space-between;
  align-items: center;

}
.text {
  font-size: 14px;
}
.item {
  margin-bottom: 18px;
}
</style>